<template>
	<el-dialog :title="title" :visible.sync="visible" :before-close="handleClose">
		<el-form ref="form" :model="form" label-width="80px">
			<el-form-item label="用户名">
				<el-input v-model="form.username"></el-input>
			</el-form-item>
			<el-form-item label="姓名">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="邮箱">
				<el-input v-model="form.email"></el-input>
			</el-form-item>
			<el-form-item label="手机号">
				<el-input v-model="form.phone"></el-input>
			</el-form-item>
			<el-form-item label="年龄">
				<el-input type="number" v-model="form.age"></el-input>
			</el-form-item>
			<el-form-item label="性别">
				<el-input v-model="form.gender"></el-input>
			</el-form-item>
			<el-form-item label="地址">
				<el-input v-model="form.address"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">保存</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
</template>

<script>
	import { Message } from 'element-ui';
import { saveOrUpdateUser } from './api';
	export default {
		data() {
			return {
				form: {
					username: '',
					name: '',
					email: '',
					phone: '',
					age: 0,
					gender: '',
					address: '',
				},
				title: '',
				visible: false,
			}
		},
		mounted(){
			console.log()
		},
		methods: {
			onSubmit() {
				let data = this.form;
				saveOrUpdateUser(data).then(res => {
					if(res.data.code == 0){
						this.title = '';
						this.form = {};
						this.visible = false;
						this.$emit('refresh')
						Message.success("保存成功");
					}else{
						Message.error(res.data.msg);
					}
				})
				console.log('submit!');
			},
			receiveValues(value){
				console.log(value)
				this.visible = value.visible;
				this.title = value.title;
				if(value.userForm != null){
					this.form = value.userForm;
				}
			},
			handleClose(done){
				this.title = '';
				this.form = {};
				this.visible = false
				this.$emit('refresh')
				done();
			}
		}
	}
</script>

<style>
</style>